<template>
	<view class="container">
		<view class="header">
			
					<view @click="goHome">
			        <u-icon name="arrow-left" size="30" color="#888" />
				  </view>
			<text class="title">历史记录</text>

			<view @click="showDialog">
				<u-icon name="trash-fill" size="30" color="#888" />
			</view>

		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in items" :key="index">
				<view class="date">2024年{{ item.date }}</view>
				<view class="image-placeholder">
					<image :src="item.image" alt="题目图片" style="width: 100px; height: 100px;" />
				</view>
				<view class="title">{{ item.title }}</view> <!-- 显示题目 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [], // 初始化为一个空数组
			};
		},

		mounted() {
			// 页面加载完成后请求数据
			this.fetchHistoryData();
		},

		methods: {
			 goHome() {
			      uni.navigateBack({
			           delta: 1 // 关闭当前页面，返回上一级页面
			         });
			    },
			
			// 获取历史记录数据
			fetchHistoryData() {
				uni.request({
					url: 'https://你的API接口地址', // 修改为实际的后台接口地址
					method: 'GET',
					success: (response) => {
						// 假设后台返回的数据结构是一个数组，包含题目和图片的 URL
						this.items = response.data; // 将获取到的数据赋值给 items 数组
					},
					fail: (error) => {
						console.error('获取数据失败:', error);
					}
				});
			},

			// 显示删除确认框
			showDeleteConfirmation() {
				uni.showModal({
					title: '确认删除',
					content: '是否确认删除这条记录？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击确定时执行删除操作
							this.deleteItem(); // 调用删除函数
						} else if (res.cancel) {
							// 用户点击取消时什么都不做
							console.log('用户取消删除');
						}
					},
				});
			},

			// 删除记录的函数
			deleteItem(itemId) {
				uni.request({
					url: `https://你的API接口地址/${itemId}`, // 删除请求的 API 地址
					method: 'DELETE',
					success: (response) => {
						console.log('删除成功');
						// 删除成功后从 items 中移除该项
						this.items = this.items.filter(item => item.id !== itemId);
					},
					fail: (error) => {
						console.error('删除失败:', error);
					}
				});
			},

			showDialog() {
				uni.showModal({
					title: '提示',
					content: '您确定要删除吗',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}

		},
	};
</script>

<style>
	.container {
		padding: 10px;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.list {
		margin-top: 10px;
	}

	.item {
		margin-bottom: 10px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10px;
	}

	.date {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.image-placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
	}

	.title {
		margin-top: 10px;
		font-size: 16px;
		color: #333;
	}
</style>
